﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="wap-font-scale" content="no">
<title>HTML5预期年化收益圆形进度条代码 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/zcircleMove.js"></script>

</head>
<body>

<div class="middleContent fixTop">
	<div class="surePass" >
        <div class="anyield">
            <p>销售平方数</p>
            <p>10000m2</p>
        </div>
		<canvas class="circleRun" data-run="0" id="canvasThree" amout="2000" nowData="1000"></canvas>
    </div>


</div>

<script>
	$(function(){
		var findCanvas=$("#canvasThree");
		var percents=findCanvas.attr('nowData')/findCanvas.attr('amout');
		
		//percents 为百分比的值  范围 0- 1
		runCircle(
		   { 
			obj:'canvasThree', 
			percent: percents,
			url:'images/zstart.png',   //飞机小图地址
			imgWidth:1,
			imgHeight:1,
			circleBottomColor:"#e6eaed",//圆环底色
			outerColorStart:'#ebf7ff',  //外部圆环 渐变色
			outerColorMid:'#d8eefc',
			outerColorEnd:'#a7cee7',
			innerColorStart:'#6fbef0',  //内部圆环 渐变色
			innerColorEnd:'#058ee4',
		   }
		);
		
	})
</script>

</body>
</html>

